<template>
<div class="main">
    <van-nav-bar title="图片详情"
                 left-text="返回"
                 left-arrow
                 @click-left="$router.back(-1)"/>
    <div class="header">
        <p class="title">{{imgDetailInfo.title}}</p>
        <p class="smallImg">{{imgDetailInfo.add_time}}</p>
    </div>
    <span v-for="(item,index) in smallImg" 
          :key="index">
        <img :src="item.src" alt="">
    </span>
    <p v-html="imgDetailInfo.content" class="content"></p>
    <componentsCeil :id="imgId">
        <template #perComment>
            <van-field style="height:80px" v-model.trim="value"  placeholder="请输入评论内容..." /> 
        </template>
        <template #submit>
            <van-button class="submit" style="width:100%" type="info" @click="subComments">发布评论</van-button>
        </template>
        <template #allComments>
            <van-list v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  :immediate-check="false">
                <van-cell v-for="(item,index) in list" 
                          :key="index" 
                          :title="item.content"
                          :value="item.add_time"
                          :label="item.user_name" />
            </van-list>
        </template>
    </componentsCeil>
</div>
</template>

<script>
import { postComments } from "../apis/comments";
import { getComments } from "../apis/comments";
import { getImgDetail } from "../apis/imageInfo";
import { getImgInfo } from "../apis/imageInfo";
import componentsCeil from "../components/componentsCeil";
export default {
data () {
    return {
        smallImg:[],
        imgDetailInfo:{},
        imgId:this.$route.params.id,
        list: [],
        page:1,
        loading:false,
        finished:false,
        value:'',
    }
},
mounted () {
    // const res = await getImgDetail(this.imgId)
    // this.smallImg = res.data.message
    
    getImgDetail(this.imgId)
    .then(res => {
        //console.log(res);
        this.smallImg = res.data.message
    })

    getImgInfo(this.imgId)
    .then(res => {
        //console.log(res);
        this.imgDetailInfo = res.data.message[0]
    })
    this.init()
},
methods: {
    init(){
        getComments(this.imgId,{pageindex:this.page})
        .then(res => {
            //console.log(res);
            this.list = [...this.list, ...res.data.message]
            //console.log(this.list);
            for (let i = 0; i < this.list.length; i++) {
                this.list[i].add_time = this.list[i].add_time.slice(0, 10)
            }
            this.loading = false;
            if (res.data.message < 10) {
                this.finished = true
            }
        })
    },
    onLoad(){
        this.page++
        this.init()
    },
    subComments(){
        if (this.value == '') {
            this.$toast.fail('评论不能为空喔')
        }else{
            postComments(this.$route.params.id,this.value)
            .then(res => {
                //console.log(res);
                getComments(this.imgId,{pageindex:1})
                .then(res => {
                    //console.log(res);
                    this.list = res.data.message
                    //console.log(this.list);
                    for (let i = 0; i < this.list.length; i++) {
                        this.list[i].add_time = this.list[i].add_time.slice(0, 10)
                    }
                })
            })
            
            this.$toast.success('评论发表成功！')
            this.value = ''
        }
    },     
},
components: {
    componentsCeil
},
}
</script>

<style lang="less" scoped>
span{
    img{
        width: 30%;
        margin-left: 10px;
        margin-top: 10px;
    }
}
.main{
    .header{
        border-bottom: 1px solid lightgray;
        padding: 20px 5px;
        .title{
            margin-bottom: 15px;
            font-size: 20px;
            font-weight: 700;
            color: #1091d7;
        }
        .smallImg{
            font-size: 12px;
            color: lightsteelblue;
        }
    }
    .content{
        margin-top: 15px;
        padding: 0 5px;
        line-height: 24px;
        font-size: 18px;
        color: gray;
        margin-bottom: 10vh;
    }
    
}
</style>